<template>
  <view class="publish-post-page">
    <!-- 自定义导航栏 -->
    <nav-bar title="发布墙墙" :show-back="true"></nav-bar>
    
    <view class="form-container">
      <!-- 分类 -->
      <view class="form-item">
        <view class="form-label">分类<text class="required">*</text></view>
        <view class="category-selector">
          <view 
            v-for="(category, index) in categories" 
            :key="index"
            :class="['category-item', { active: formData.categoryId === category.id }]"
            @click="selectCategory(category.id)"
          >
            {{ category.name }}
          </view>
        </view>
      </view>
      
      <!-- 标题 -->
      <view class="form-item">
        <view class="form-label">标题</view>
        <input 
          class="form-input" 
          type="text" 
          v-model="formData.title" 
          placeholder="标题会让更多人看到你的帖子（选填）"
          maxlength="30"
        />
      </view>
      
      <!-- 内容 -->
      <view class="form-item content-item">
        <textarea 
          class="form-textarea" 
          v-model="formData.content" 
          placeholder="在这里分享你的校园故事、情感、趣事..."
          maxlength="1000"
        ></textarea>
        <view class="word-count">{{ formData.content.length }}/1000</view>
      </view>
      
      <!-- 话题选择 -->
      <view class="form-item">
        <view class="form-label">添加话题</view>
        <view class="tags-container">
          <view 
            v-for="(tag, index) in formData.selectedTags" 
            :key="index"
            class="selected-tag"
          >
            <text class="tag-text">#{{ tag }}</text>
            <text class="tag-delete" @click="removeTag(index)">×</text>
          </view>
          
          <view class="tag-input-wrapper" v-if="formData.selectedTags.length < 3">
            <input 
              class="tag-input" 
              type="text" 
              v-model="tagInput"
              placeholder="添加话题，最多3个" 
              @confirm="addTag"
              confirm-type="done"
            />
          </view>
        </view>
        
        <!-- 热门话题推荐 -->
        <view class="hot-tags">
          <text class="hot-title">热门话题:</text>
          <view class="tags-scroll">
            <text 
              v-for="(tag, index) in hotTags" 
              :key="index"
              class="hot-tag-item"
              @click="quickAddTag(tag)"
            >#{{ tag }}</text>
          </view>
        </view>
      </view>
      
      <!-- 图片上传 -->
      <view class="form-item">
        <view class="form-label">上传图片<text class="tips">(最多9张)</text></view>
        <view class="image-uploader">
          <view 
            v-for="(image, index) in formData.images" 
            :key="index"
            class="image-preview"
          >
            <image :src="image" mode="aspectFill"></image>
            <view class="delete-btn" @click="removeImage(index)">
              <tn-icon name="close" size="20" color="#ffffff"></tn-icon>
            </view>
          </view>
          
          <view class="upload-btn" @click="chooseImage" v-if="formData.images.length < 9">
            <tn-icon name="add" size="40" color="#999999"></tn-icon>
          </view>
        </view>
      </view>
      
      <!-- 匿名选项 -->
      <view class="form-item anonymous-item">
        <view class="anonymous-content">
          <text>匿名发布</text>
          <switch 
            :checked="formData.isAnonymous" 
            @change="formData.isAnonymous = !formData.isAnonymous"
            color="#BA68C8"
          />
        </view>
        <view class="anonymous-tip">开启后，不会显示您的昵称和头像</view>
      </view>
    </view>
    
    <!-- 底部提交按钮 -->
    <view class="bottom-submit safe-area-inset-bottom">
      <tn-button
        class="submit-btn"
        background-color="#BA68C8"
        shape="round"
        width="90%"
        :disabled="!isFormValid"
        @click="submitForm"
      >
        发布
      </tn-button>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import NavBar from '@/components/navbar/NavBar.vue';

// 分类列表
const categories = [
  { id: 1, name: '表白墙' },
  { id: 2, name: '吐槽' },
  { id: 3, name: '求助' },
  { id: 4, name: '交友' },
  { id: 5, name: '失物招领' }
];

// 热门话题
const hotTags = [
  '校园生活',
  '表白墙',
  '求职实习',
  '学习讨论',
  '美食分享',
  '趣事分享',
  '宿舍生活',
  '考研',
  '毕业季'
];

// 话题输入
const tagInput = ref('');

// 表单数据
const formData = ref({
  categoryId: 1, // 默认选中表白墙
  title: '',
  content: '',
  selectedTags: [],
  images: [],
  isAnonymous: false
});

// 表单校验
const isFormValid = computed(() => {
  return formData.value.content.trim() !== '';
});

// 选择分类
const selectCategory = (categoryId) => {
  formData.value.categoryId = categoryId;
};

// 添加话题标签
const addTag = () => {
  if (!tagInput.value) return;
  
  if (formData.value.selectedTags.length >= 3) {
    uni.showToast({
      title: '最多只能添加3个话题',
      icon: 'none'
    });
    return;
  }
  
  // 检查重复
  if (formData.value.selectedTags.includes(tagInput.value)) {
    uni.showToast({
      title: '该话题已添加',
      icon: 'none'
    });
    tagInput.value = '';
    return;
  }
  
  formData.value.selectedTags.push(tagInput.value);
  tagInput.value = '';
};

// 快速添加热门话题
const quickAddTag = (tag) => {
  if (formData.value.selectedTags.length >= 3) {
    uni.showToast({
      title: '最多只能添加3个话题',
      icon: 'none'
    });
    return;
  }
  
  // 检查重复
  if (formData.value.selectedTags.includes(tag)) {
    uni.showToast({
      title: '该话题已添加',
      icon: 'none'
    });
    return;
  }
  
  formData.value.selectedTags.push(tag);
};

// 移除话题标签
const removeTag = (index) => {
  formData.value.selectedTags.splice(index, 1);
};

// 选择图片
const chooseImage = () => {
  uni.chooseImage({
    count: 9 - formData.value.images.length,
    success: (res) => {
      formData.value.images = [...formData.value.images, ...res.tempFilePaths];
    }
  });
};

// 移除图片
const removeImage = (index) => {
  formData.value.images.splice(index, 1);
};

// 提交表单
const submitForm = () => {
  // 表单校验
  if (!isFormValid.value) {
    uni.showToast({
      title: '请输入内容',
      icon: 'none'
    });
    return;
  }
  
  // 显示加载提示
  uni.showLoading({
    title: '发布中...'
  });
  
  // 模拟请求延时
  setTimeout(() => {
    // 隐藏加载提示
    uni.hideLoading();
    
    // 显示成功提示
    uni.showToast({
      title: '发布成功',
      icon: 'success',
      duration: 2000,
      success: () => {
        // 延迟返回上一页
        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
      }
    });
  }, 1500);
};
</script>

<style lang="scss" scoped>
.publish-post-page {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding-bottom: 120rpx;
}

.form-container {
  padding: 20rpx;
}

.form-item {
  background-color: #ffffff;
  padding: 24rpx;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  
  .form-label {
    font-size: 28rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
    
    .required {
      color: #FF5252;
      margin-left: 6rpx;
    }
    
    .tips {
      color: #999;
      font-size: 24rpx;
      font-weight: normal;
      margin-left: 10rpx;
    }
  }
  
  .form-input {
    font-size: 28rpx;
    padding: 16rpx 0;
    width: 100%;
    border-bottom: 1px solid #f0f0f0;
  }
  
  .form-textarea {
    width: 100%;
    height: 320rpx;
    font-size: 28rpx;
    padding: 16rpx 0;
    line-height: 1.6;
  }
}

.category-selector {
  display: flex;
  flex-wrap: wrap;
  
  .category-item {
    padding: 16rpx 30rpx;
    background-color: #f8f8f8;
    border-radius: 30rpx;
    margin-right: 16rpx;
    margin-bottom: 16rpx;
    font-size: 26rpx;
    
    &.active {
      background-color: #BA68C8;
      color: #ffffff;
    }
  }
}

.content-item {
  position: relative;
  
  .word-count {
    position: absolute;
    bottom: 24rpx;
    right: 24rpx;
    font-size: 24rpx;
    color: #999;
  }
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 10rpx;
  margin-bottom: 10rpx;
  border-bottom: 1px solid #f0f0f0;
  
  .selected-tag {
    display: flex;
    align-items: center;
    background-color: #f0f0f0;
    padding: 8rpx 16rpx;
    border-radius: 30rpx;
    margin-right: 16rpx;
    margin-bottom: 16rpx;
    
    .tag-text {
      font-size: 26rpx;
      color: #333;
    }
    
    .tag-delete {
      font-size: 26rpx;
      color: #999;
      margin-left: 8rpx;
      padding: 0 4rpx;
    }
  }
  
  .tag-input-wrapper {
    padding: 8rpx 16rpx;
    
    .tag-input {
      font-size: 26rpx;
      min-width: 100rpx;
    }
  }
}

.hot-tags {
  margin-top: 16rpx;
  
  .hot-title {
    font-size: 26rpx;
    color: #999;
    margin-right: 10rpx;
  }
  
  .tags-scroll {
    margin-top: 10rpx;
    white-space: nowrap;
    overflow-x: auto;
    
    &::-webkit-scrollbar {
      display: none;
    }
    
    .hot-tag-item {
      display: inline-block;
      font-size: 26rpx;
      color: #BA68C8;
      margin-right: 20rpx;
      padding: 8rpx 0;
    }
  }
}

.image-uploader {
  display: flex;
  flex-wrap: wrap;
  
  .image-preview, .upload-btn {
    width: 200rpx;
    height: 200rpx;
    margin-right: 16rpx;
    margin-bottom: 16rpx;
    border-radius: 12rpx;
    overflow: hidden;
  }
  
  .image-preview {
    position: relative;
    
    image {
      width: 100%;
      height: 100%;
    }
    
    .delete-btn {
      position: absolute;
      top: 10rpx;
      right: 10rpx;
      width: 40rpx;
      height: 40rpx;
      background-color: rgba(0, 0, 0, 0.5);
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  
  .upload-btn {
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px dashed #ddd;
  }
}

.anonymous-item {
  .anonymous-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10rpx 0;
  }
  
  .anonymous-tip {
    font-size: 24rpx;
    color: #999;
    margin-top: 10rpx;
  }
}

.bottom-submit {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  padding: 20rpx 0;
  display: flex;
  justify-content: center;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}
</style>